又見面啦各位，是不是很開心呢 ~ 今天又是一天學 Vue 的好日子呢
說到 vue，似乎還沒跟各位好好介紹過呢，那今天就來好好認識一下吧

Vue 初探

Vue 是一款由 JavaScript 延伸而成的漸進式框架，並且比原本的 JavaScript 更加簡單輕量，與其他框架不同的是，Vue 不僅可以與前端框架的函式庫做整合與共用，也可以通過簡單的 API 去提供高效率的數據綁定及輕量化組件的一套系統。

漸進式框架

而這款好用的框架式由 Evan You 在 2014 年的 2 月所創造出來的，而當初在作者創作的初期，並不是以框架為前提去做建構，而是使用 library ，但後來就慢慢演變成 framework 了。這也是一個關於 Vue 的有趣小故事呢！

除此之外，Vue 也可以用來寫成一個單頁式的應用程式，這代表我們可以完全去依靠 Vue 建構成一個完整的網頁，而當我們在處理較為複雜的網頁時，能大大的提高開發效率。並且 Vue 所提供的函式庫也可以用來做客戶端路由及狀態管理。比較特別的是，雖然 Vue 的開發團隊推薦我們使用這些函式庫，但卻沒有讓函式庫打包進去 Vue，而是把選擇權給了使用者，讓大家去自由的選擇適合自己的應用路由庫及狀態管理庫。

然而，我們除了可以把 Vue 整合至應用程式內，也可以使用漸進式的方式去撰寫網頁。與大部分的前端框架相同，可以創造重複使用的網頁內容區塊，而在 Vue 中我們稱之為 Component (元件)，是使用一種特殊的 HTML 樣板語法去撰寫而成的，而當我們在特殊的廠景使用 HTML 語法時會遭受到限制，這時候就可以使用 JSX 或 Javascript 的函式去定義我們的原元件。

Component 之間資料溝通傳遞的方式

近年來，Vue 也可使漸漸地將 React 的 Virtual DOM 及 Angular 的 Directive 結合起來，對於有熟悉一個以上框架的開發者來說，上手的難度不會太大，而對於新手也很友善。

這邊要注意的是，Vue 並不支持 IE8 及以下的版本，Vue 使用的是 IE8 無法模擬的 ECMAScript 5 特性。但卻支持所有兼容 ECMAScript 5 的瀏覽器喔！

Vue 模板 (Template)

Template 是組成 Vue 的很重要部分，template 將介面 (UI)、資料及業務邏輯分開。在資料和業務邏輯這部分是使用 JavaScript 撰寫而成的。介面則是由 HTML 及 CSS 去定義出來的，而 Vue 負責的是將寫好的內容用 template 編譯成使用者所看到的內容。

透過 template 我們可以最大限度的去減少我們所撰寫的程式碼，同樣的程式碼就不用去重複寫許多遍。再來，template 也能讓我們在資料變動時，不需要去做 UI 更改，只需要在 Mount 中更新 HTML 就好，而這是因為 UI 並不是透過 HTML 去定義的，而是由資料驅動去宣告並綁定在前端。

而對於 Vue 來說，最主要核心功能有兩個：

• 「宣告式渲染」
• 「元件系統」

下面就讓我逐一介紹吧。

但在介紹宣告式渲染前，我們需要先知道一下指令式渲染的運作模式喔！

指令式渲染

在過去傳統的 jQuery 或原生 JavaScript 在操作網頁畫面時，大多都是直接以 DOM 物件為導向去處理的。 那DOM 物件是什麼呢？這邊舉個例子跟大家科普一下!

假如我們想要設定：當使用者在點擊按鈕的同時，也能同步更新另一顆按鈕上的文字內容。在 JavaScript 中，我們會使用直接操作 DOM 物件的方式來處理。

首先我們先把要點擊的 Button 及要被改變文字內容的 Button 寫好。

接下來我們利用 addEventListener 去監聽 Button 的事件，在事件發生的同時，也能同步更新另一顆 Button 的文字內容，這樣我們想要的功能就寫好了

那如果我們需要大量的去改變文字內容呢 ? 就需要寫非常多的 addEvenDOM 物件tListener 去做事件觸發了。
像這種需要一個指令一個動作的方式，以操作 DOM 為基礎的模式，又稱錯「指令式程式設計」或是「指令式渲染」。

那我簡單與各位說明一下運作模式，首先，後端會先把資料顯示在前端上，接者透過 JavaScript 把資料從 DOM 取出，處理完再放回去給 DOM 。而像這種沒有將狀態做集中管理的方式，其實是非常不好的，假如當我們把其中一個 DOM 給刪除時，就意味著這個資料是永久消失，之後想要也沒有了。

像 JavaScript 就是以事件驅動為操作的程式語言，當網頁需要處理的元素數量較少時，就可以直接以 DOM 去進行操作，而這種開發方式讓人可以簡單直覺地去撰寫，而當我們專案的規模增長，網頁需要被管理的元素也增加時，事件就會變得複雜，這時候如果還是持續使用 DOM 的話，就容易讓程式碼混亂，也會增加日後維修的困難。

以上就是對於「指令式渲染」的簡單介紹，接下來我們就來講講宣告式渲染吧

宣告式渲染

「宣告式渲染」顧名思義，他是目標是希望能以宣告的方式在 template 中表現 JavaScript 裡的資料，當資料更新時，Vue 就會根據資料或狀態的內容去同步跟更新 template ，讓他可以將我們的資料渲染出來。

我們在這裡也舉個跟上面一樣的例子，帶改成用 Vue.js 去撰寫。

可以看到以上的程式碼，寫法很明顯地跟 JavaScript 不同，但在 HTML 中可一樣可以看到我們是利用點擊 Button 的方式去改變另一顆 Button 的文字內容。而我們移除了 DOM 的操作方式，取而代之的是我們用 new 去建立一個 Vue 實體。

在 Vue 中，我們用會大括號 {{}} 去表示我們想要顯示的內容，而對應到 Vue 實體的 message 狀態，在渲染到我們的網頁上。我們也可以很明顯的看到程式碼精簡了不少。而未來若需要在網頁新增對應 message 的元素，也只需要在 HTML 的模板中更改，也就不需要去動到 JavaScript 的程式碼了。

如上圖可以一次新增多組，而就不需要像指令式渲染一樣將個別的 DOM 找出並一一修改 innerHTML。

簡單來說，宣告式渲染就是把資料與狀態統一交給 JavaScript 的物件去維護管理。而當網頁修改時，就會針對物件裡的狀態進行操作，當狀態被修改後，Vue 就會自動把模板中內容進行同步更新。而這種模式也可以稱做是「MVVM」。

MVVM 模式

MVVM 模式是分別由 Model、View 及 ViewModel 這三部分所組成的，Model 和 View 層分別代表著狀態與畫面這兩個部分，而 ViewModel 層會自動將 Model 和 View 層的狀態自動同步。

我們的 Vue 正是利用了這種模式，當使用者在操作 View 或是網頁時，就會使 ViewModel 層的 Vue.js 將狀態存至 Model，而若 Model 中的狀態被修改的同時，對應在網頁中的內容也會同步被更新。

Component (元件) 系統

Component 是可以在元件化之後，同樣邏輯、模板的東西是可以被拿來重複使用。
如果說 DOM 模型可以組成 DOM-Tree 的模式，那 Vue 的原件系統則是把概念加以簡化，讓最小單位不只是 Node 節點，也可以變成各種組合好的元件單元。

而原件的最小單位是節點，也可以是許多格節點組成而成的原件，甚至原件內也內含有原件。每個原件中也會有各自的模板、邏輯及樣式，而這些由原件建構而成的網頁，也被稱之為原件樹。

好啦！說到這裡，相信大家都累了吧，現在腦袋裡對於 Vue 有沒有初步的了解呢！
那我們今天的介紹也到這裡結束了，明天就會開始 Vue 的安裝喔！謝謝大家